html { height: 100%; margin: 0px; padding: 0px; }

body { margin: 0 auto; width: 100%; height: 100%; font-family: "Open Sans", "Helvetica", "Arial", "Sans-Serif"; overflow-x: hidden; }

main { width: 70%; margin: 0 auto; }

main .wrapper { height: auto; }

a { text-decoration: none; color: black; }
a:hover { text-decoration: none; color: #999; border-bottom: 2px solid rgba(153, 153, 153, 0.6); }
a:active { text-decoration: none; color: #999; }

h1 { font-size: 3em; font-family: "Montserrat", "Helvetica", "Arial", "Sans-Serif"; }
h1 a:hover { color: black; border-bottom: none; }

p { font-size: 1.5em; line-height: 1.4em; color: #333; }

header { position: fixed; width: 100%; }
header .wrapper { display: table; width: 100%; background-color: white; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
header .wrapper #nav-default { display: table-row; width: 100%; }
header .wrapper #nav-default .logo-wrapper, header .wrapper #nav-default .copyright, header .wrapper #nav-default .nav-wrapper { display: table-cell; padding-top: 10px; padding-bottom: 10px; vertical-align: middle; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
header .wrapper #nav-default.no-padding .logo-wrapper, header .wrapper #nav-default.no-padding .copyright, header .wrapper #nav-default.no-padding .nav-wrapper { padding-bottom: 0px; }
header .wrapper #nav-default .logo-wrapper { width: 70px; padding-left: 10px; }
header .wrapper #nav-default .logo-wrapper .logo { margin-right: 30px; width: 60px; height: 60px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
header .wrapper #nav-default .copyright { vertical-align: middle; font-size: 1.8em; font-weight: 300; font-family: "Julius Sans One", "Helvetica", "Arial", "Sans-Serif"; }
header .wrapper #nav-default .copyright span { display: block; }
header .wrapper #nav-default .nav-wrapper { text-align: right; padding-right: 10px; padding-left: 0px; }
header .wrapper #nav-default .nav-wrapper nav { font-size: 1em; height: 100%; vertical-align: middle; }
header .wrapper #nav-default .nav-wrapper nav ul { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; margin: 0; }
header .wrapper #nav-default .nav-wrapper nav ul li { display: inline-block; font-weight: bold; margin-right: 20px; }
header .wrapper #nav-default .nav-wrapper nav ul li.contact a { border: 2px solid black; padding: 2px 4px; }
header .wrapper #nav-default .nav-wrapper nav ul li.contact a:hover { border-color: rgba(153, 153, 153, 0.6); }
header .wrapper #nav-default .nav-wrapper nav ul li.contact a:active, header .wrapper #nav-default .nav-wrapper nav ul li.contact a:visited { border-color: black; }
header .wrapper #nav-default .nav-wrapper nav ul li#hamburger { display: none; cursor: pointer; margin-right: 0; /*@include transition(all 0.3s);*/ }
header .wrapper #nav-default .nav-wrapper nav ul li#hamburger .wrapping { display: inline-block; vertical-align: text-top; width: 20px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -ms-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; }
header .wrapper #nav-default .nav-wrapper nav ul li#hamburger .wrapping:hover { border-bottom: none; }
header .wrapper #nav-default .nav-wrapper nav ul li#hamburger .wrapping span { margin: 0; display: block; position: absolute; height: 2px; width: 100%; background: black; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; -ms-transition: 0.25s ease-in-out; -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out; }
header .wrapper #nav-default .nav-wrapper nav ul li#hamburger .wrapping span:nth-child(1) { top: 4px; }
header .wrapper #nav-default .nav-wrapper nav ul li#hamburger .wrapping span:nth-child(2), header .wrapper #nav-default .nav-wrapper nav ul li#hamburger .wrapping span:nth-child(3) { top: 10px; }
header .wrapper #nav-default .nav-wrapper nav ul li#hamburger .wrapping span:nth-child(4) { top: 16px; }
header .wrapper #nav-default .nav-wrapper nav ul li#hamburger.open .wrapping span:nth-child(1), header .wrapper #nav-default .nav-wrapper nav ul li#hamburger.open .wrapping span:nth-child(4) { top: 10px; width: 0%; left: 50%; }
header .wrapper #nav-default .nav-wrapper nav ul li#hamburger.open .wrapping span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
header .wrapper #nav-default .nav-wrapper nav ul li#hamburger.open .wrapping span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
header .wrapper #nav-default .nav-wrapper nav ul li#hamburger:hover .wrapping span { background: #999; }
header .wrapper #nav-default .nav-wrapper nav ul li#hamburger.open .wrapping span { background: red; }
header .wrapper #nav-default .nav-wrapper nav ul li#hamburger.open:hover .wrapping span { background: red; }
header .wrapper #nav-mobile { display: table-row; width: 100%; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
header .wrapper #nav-mobile .spacer { display: table-cell; width: 0; }
header .wrapper #nav-mobile ul { display: table-cell; float: right; list-style-type: none; margin: 0; }
header .wrapper #nav-mobile ul li { display: none; margin: 10px; min-width: 60px; border-bottom: 1px #dfdfdf solid; padding-bottom: 10px; padding-left: 50px; text-align: right; }
header .wrapper #nav-mobile ul li a:hover { border-bottom: none; font-weight: bold; color: black; }
header .wrapper #nav-mobile ul li:last-child { border-bottom: none; padding-bottom: 0; }
header .wrapper #nav-mobile.open { display: table-row; }
header.compact .wrapper #nav-default .logo-wrapper, header.compact .wrapper #nav-default .copyright, header.compact .wrapper #nav-default .nav-wrapper { padding-top: 3px; padding-bottom: 3px; }
header.compact .wrapper #nav-default .logo-wrapper { width: 40px; }
header.compact .wrapper #nav-default .logo-wrapper .logo { width: 20px; height: 20px; margin: 0; }
header.compact .wrapper #nav-default .copyright { font-size: 0.8em; }
header.compact .wrapper #nav-default .nav-wrapper nav { font-size: 0.8em; }
header.compact .wrapper #nav-default .nav-wrapper nav ul li a { border-bottom-width: 1px; }
header.compact .wrapper #nav-default .nav-wrapper nav ul li.contact a { border-width: 2px; padding: 0px 2px; }
header.compact .wrapper #nav-default .nav-wrapper nav ul li#hamburger .wrapping span:nth-child(1) { top: 2px; }
header.compact .wrapper #nav-default .nav-wrapper nav ul li#hamburger .wrapping span:nth-child(2), header.compact .wrapper #nav-default .nav-wrapper nav ul li#hamburger .wrapping span:nth-child(3) { top: 8px; }
header.compact .wrapper #nav-default .nav-wrapper nav ul li#hamburger .wrapping span:nth-child(4) { top: 14px; }
header.compact .wrapper #nav-default .nav-wrapper nav ul li#hamburger.open .wrapping span:nth-child(1), header.compact .wrapper #nav-default .nav-wrapper nav ul li#hamburger.open .wrapping span:nth-child(4) { top: 8px; }
header.compact .wrapper #nav-mobile { font-size: 0.8em; }
header.compact .wrapper #nav-mobile ul li { padding-bottom: 5px; margin: 5px; min-width: 50px; }

#hero img { width: 100%; }

footer { font-size: .8em; text-align: center; background: #dfdfdf; }

footer .logo { height: 60px; width: 60px; vertical-align: middle; margin-left: 10px; margin-right: 10px; }

footer p { font-size: 1em; text-align: center; }

footer .logo-wrapper { margin-top: 30px; margin-bottom: 30px; font-size: 1.8em; font-weight: bold; font-family: "Julius Sans One", "Helvetica", "Arial", "Sans-Serif"; }

/* When the screen is less than $threshold pixels wide, hide all list items.
Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width: 820px) { header .wrapper #nav-default .nav-wrapper nav { float: right; }
  header .wrapper #nav-default .nav-wrapper nav ul li { display: none; }
  header .wrapper #nav-default .nav-wrapper nav ul li:nth-last-child(2) { display: inline-block; }
  header .wrapper #nav-default .nav-wrapper nav ul li#hamburger { display: inline-block; }
  main { width: 90%; } }
@media screen and (max-width: 580px) { header .wrapper #nav-default .logo-wrapper, header .wrapper #nav-default .copyright, header .wrapper #nav-default .nav-wrapper { padding-top: 3px; padding-bottom: 3px; }
  header .wrapper #nav-default .logo-wrapper { width: 40px; }
  header .wrapper #nav-default .logo-wrapper .logo { width: 20px; height: 20px; margin: 0; }
  header .wrapper #nav-default .copyright { font-size: 0.8em; }
  header .wrapper #nav-default .nav-wrapper nav { font-size: 0.8em; }
  header .wrapper #nav-default .nav-wrapper nav ul li a { border-bottom-width: 1px; }
  header .wrapper #nav-default .nav-wrapper nav ul li.contact a { border-width: 2px; padding: 0px 2px; }
  header .wrapper #nav-default .nav-wrapper nav ul li#hamburger .wrapping span:nth-child(1) { top: 2px; }
  header .wrapper #nav-default .nav-wrapper nav ul li#hamburger .wrapping span:nth-child(2), header .wrapper #nav-default .nav-wrapper nav ul li#hamburger .wrapping span:nth-child(3) { top: 8px; }
  header .wrapper #nav-default .nav-wrapper nav ul li#hamburger .wrapping span:nth-child(4) { top: 14px; }
  header .wrapper #nav-default .nav-wrapper nav ul li#hamburger.open .wrapping span:nth-child(1), header .wrapper #nav-default .nav-wrapper nav ul li#hamburger.open .wrapping span:nth-child(4) { top: 8px; }
  header .wrapper #nav-mobile { font-size: 0.8em; }
  header .wrapper #nav-mobile ul li { padding-bottom: 5px; margin: 5px; min-width: 50px; } }
@media screen and (min-width: 820px) { header .wrapper #nav-mobile.open { display: none; } }